<template>
  <div v-if='giftList'  >
    <div class='tab-list'>
      <div
        class='tab-item'
        :class='[tabIndex==0?"active":""]'
        @tap='tabIndex=0'
      >未使用</div>
      <div
        class='tab-item'
        :class='[tabIndex==1?"active":""]'
        @tap='tabIndex=1'
      >已过期</div>
    </div>
    <div
      class='offer'
      v-if='giftList.length'
    >
      <div class='content'>
        <table
          v-for='item in giftList '
          :key='item'
          v-if='item.arr.length-item.expiredNum>0&&tabIndex==0'
          :class="[showAll?'tiaozheng':'xuanzhe']"
        >
          <div class='card-num'>
            <div>客户卡号 : {{item.title.JianMa}} </div>
            <div>
            </div>
          </div>
          <thead class='thead'>
            <tr @click="selectCheck(item,'-1')">
              <th
                class='check'
                v-if='!showAll'
              >

                <div>
                  <icon
                    :type="item.isSelect?'success_no_circle':''"
                    :size="store.check.size"
                    :color="store.check.color"
                  />
                </div>
              </th>
              <th>
                品名货号</th>
              <th>
                数量</th>
              <th>
                有效期</th>
              <th>
                赠品类型</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(items,indexs) in item.arr"
              :key='items.HuoHao'
              v-if='!items.expired'
              @click="selectCheck(item,items)"
            >
              <td
                class='check'
                v-if='!showAll'
              >

                <div>

                  <icon
                    :type="items.isSelect?'success_no_circle':''"
                    :size="store.check.size"
                    :color="store.check.color"
                  />
                </div>
              </td>
              <td>
                <div>{{items.HuoHao}} </div>
                <div> {{items.SPMingCheng}}</div>
              </td>
              <td>{{items.ZP_leftQuantity}}</td>
              <td>{{items.EndDateStr}}</td>
              <td>{{items.ZP_type}} </td>
            </tr>

          </tbody>
        </table>

        <table
          v-for='item in giftList '
          :key='item'
          v-if='item.expiredNum>0&&tabIndex==1'
          :class="[showAll?'tiaozheng':'xuanzhe']"
        >
          <div class='card-num'>
            <div>客户卡号 : {{item.title.JianMa}} </div>
            <div>
            </div>
          </div>
          <thead class='thead'>
            <tr @click="selectCheck(item,'-1')">
              <th
                class='check'
                v-if='!showAll'
              >

                <div>
                  <icon
                    :type="item.isSelect?'success_no_circle':''"
                    :size="store.check.size"
                    :color="store.check.color"
                  />
                </div>
              </th>
              <th>
                品名货号</th>
              <th>
                数量</th>
              <th>
                有效期</th>
              <th>
                赠品类型</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(items,indexs) in item.arr"
              :key='items.HuoHao'
              v-if='items.expired'
              @click="selectCheck(item,items)"
            >
              <td
                class='check'
                v-if='!showAll'
              >

                <div>

                  <icon
                    :type="items.isSelect?'success_no_circle':''"
                    :size="store.check.size"
                    :color="store.check.color"
                  />
                </div>
              </td>
              <td>
                <div>{{items.HuoHao}} </div>
                <div> {{items.SPMingCheng}}</div>
              </td>
              <td>{{items.ZP_leftQuantity}}</td>
              <td>{{items.EndDateStr}}</td>
              <td>{{items.ZP_type}} </td>
            </tr>

          </tbody>
        </table>
      </div>

      <div
        class="to-buy"
        v-if='!showAll'
      >
        <div
          @click="submitGift"
          :class="[isDisable?'disable':'']"
        >
          选择订购
        </div>

      </div>
    </div>
    <div v-else>
      <default-none :text="'暂无相关赠品'"></default-none>
    </div>
    <div class='pading-bottom-iphone'>

    </div>
  </div>
</template>

<script>
import { ZengPinLiteapp } from '@/api/api'
import defaultNone from '@/components/defaultNone'
export default {
  data () {
    return {
      tabIndex: 0,
      giftList: null,
      showAll: false,
      isDisable: true
    }
  },

  components: {
    defaultNone
  },

  computed: {
    store () {
      return this.$store.state
    }
  },

  mounted () {
    this.tabIndex = 0
    let showAll = this.$root.$mp.query.showAll

    if (showAll === 'false') {
      this.showAll = false
    } else {
      this.showAll = true
      this.$wx.setNavigationBarTitle('赠品查询')
    }

    this.getZengPinLiteapp()
  },

  methods: {
    selectCheck (item, items) {
      if (this.showAll) {
        return false
      }
      if (items.expired) {
        this.$wx.textToast('不在有效期范围')
        return
      }
      let giftList = this.giftList

      // 当前表格选中全选 else 单行点击
      if (items === '-1') {
        item.isSelect = !item.isSelect
      } else {
        if (items.ZP_leftQuantity <= 0) {
          this.$wx.textToast('数量不足')
          return
        }
        items.isSelect = !items.isSelect
      }
      let isDisable = true
      for (let key of giftList) {
        // 清除非当前的表格下选中的
        let status = 0
        if (key.title.KH_ID !== item.title.KH_ID) {
          key.isSelect = false
          status = 2
        } else if (items === '-1') {
          status = 1
        }
        // 记录勾选状态数量
        let trueCounts = 0
        // 记录数组长度
        let lenCounts = 0
        for (let keys of key.arr) {
          lenCounts += 1
          if (keys.ZP_leftQuantity <= 0) {
            continue
          }
          if (status === 1) {
            if (keys.expired) {
              this.$wx.textToast('有商品不在有效期')
            } else {
              keys.isSelect = item.isSelect
            }
          } else if (status === 2) {
            keys.isSelect = false
          }
          keys.isSelect === true && (trueCounts += 1) && (isDisable = false)
          // 判断是否自动勾选全选或者取消状态
          if (trueCounts === key.arr.length) {
            key.isSelect = true
          } else if (lenCounts === key.arr.length) {
            key.isSelect = false
          }
        }
      }
      this.isDisable = isDisable
    },
    async getZengPinLiteapp () {
      let res = await ZengPinLiteapp()

      let shoppingList = this.$wx.getStore('shoppingCart')

      let keysObj = {}
      let today = new Date()
      let year = today.getFullYear()
      let mounth = today.getMonth() + 1
      let day = today.getDate()
      let timeM = new Date(`${year}/${mounth}/${day}`).getTime()
      for (let key of res) {
        key.EndDateStr = key.EndDateStr.replace(/-/g, '/')
        key.expired = new Date(key.EndDateStr).getTime() < timeM

        key.isSelect = false
        key.settleStyle = '赠品'
        key.BJ_price = 0
        key.SPMingcheng = key.SPMingCheng
        key.number = key.ZP_leftQuantity

        if (keysObj[key.JianMa]) {
          keysObj[key.JianMa].expiredNum += key.expired ? 1 : 0
          keysObj[key.JianMa].arr.push(key)
        } else {
          keysObj[key.JianMa] = {
            title: key,
            arr: [key],
            isSelect: false,
            expiredNum: key.expired ? 1 : 0
          }
        }
      }
      let giftData = []
      for (let key in keysObj) {
        giftData.push(keysObj[key])
      }

      /** 选择赠品帅选 */

      if (!this.showAll) {
        let count = 0
        for (let keys of giftData) {
          count += 1
          if (shoppingList[0].title.KH_bianHao === keys.title.JianMa) {
            giftData = [keys]
            break
          } else if (count === giftData.length) {
            giftData = []
          }
        }
      }
      this.giftList = giftData
    },
    submitGift () {
      if (this.isDisable) {
        return false
      }
      let giftData = this.giftList

      let shoppingList = this.$wx.getStore('shoppingCart')
      for (let key of shoppingList) {
        for (let keys of giftData) {
          if (key.title.KH_bianHao === keys.title.JianMa) {
            // 清空购物车赠品
            let shoppingArr = []
            for (let keysChild of key.arr) {
              if (keysChild.settleStyle !== '赠品') {
                shoppingArr.push(keysChild)
              }
            }
            key.arr = shoppingArr

            for (let keysChild of keys.arr) {
              if (keysChild.isSelect) {
                console.log(keysChild)

                key.arr.push(keysChild)
              }
            }
          }
        }
      }
      this.$wx.getStore('shoppingCart', shoppingList)
      this.$wx.navigator(1)
    },
    goTo () {
      this.$wx.navigator('/pages/chooseAnOffer/listOfGoods')
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/common/scss/base.scss';
 
.offer {
  background: #fff;
  padding: 0 30px;
  .pading-bottom-iphone {
    padding-bottom: 94px;
  }
  .xuanzhe {
    padding-bottom: 40px;
    .card-num {
      height: 80px;
      @include fjc;
      > div:first-child {
        @include fontSize(28);
      }
      div {
        @include color666;
        @include fontSize(24);
      }
    }
    thead {
      @include border-top(#b5b4b5);
      tr {
        @include fjc(flex-start);

        th {
          @include fjc(center);
          background: #e5e4e5;
          justify-content: center !important;
          @include fontSize(28);
          color: #222;
          height: 80px;
        }
      }
    }
    tbody {
      tr {
        display: flex;
        justify-content: center;
        align-items: stretch !important;

        td {
          background: #f8f8f7;
          @include color666;

          @include fontSize(28);
          @include fjc(center);
          min-height: 80px;
        }

        .assemble:after {
          border-bottom: none !important;
        }
        .assemble-num {
          position: absolute !important;
          right: 0;
          bottom: 0;
          width: 156px;
          @include fjc(center);
          &:after {
            border: none !important;
          }
        }
      }
    }
    thead tr,
    tbody tr {
      @include border-left(#b5b4b5);

      @include border-bottom(#b5b4b5);
      th,
      td {
        box-sizing: border-box;
        @include border-right(#b5b4b5);
      }
      > th:first-child,
      td:first-child {
        min-width: 62px;
      }
      > th:nth-child(2),
      td:nth-child(2) {
        max-width: 250px;
        min-width: 250px;
        padding: 0 10px;
        box-sizing: border-box;
        vertical-align: top;

        @include fjc(flex-start);
        flex-flow: row wrap;
        > div {
          width: 286px;
          max-width: 286px;
        }
      }
      > th:nth-child(3),
      > td:nth-child(3) {
        max-width: 80px;
        min-width: 80px;
        white-space: nowrap;
      }

      > td:nth-child(4),
      > th:nth-child(4) {
        max-width: 156px;
        min-width: 156px;
        white-space: nowrap;
        @include fontSize(22);
      }
      > th:nth-child(5) {
        white-space: nowrap;
      }
      > th:nth-child(5),
      > td:nth-child(5) {
        max-width: 230px;
        width: 230px;
        padding: 0 10px;
      }
    }
  }
  .tiaozheng {
    padding-bottom: 40px;
    .card-num {
      height: 80px;
      @include fjc;
      > div:first-child {
        @include fontSize(28);
      }
      div {
        @include color666;
        @include fontSize(24);
      }
    }
    thead {
      @include border-top(#b5b4b5);
      tr {
        @include fjc(flex-start);
        th {
          @include fjc(center);
          background: #e5e4e5;
          justify-content: center !important;
          @include fontSize(28);
          color: #222;
          height: 80px;
        }
      }
    }
    tbody {
      tr {
        @include fjc(flex-start);

        td {
          background: #f8f8f7;
          @include color666;
          @include fjc(center);
          @include fontSize(28);
          min-height: 80px;
        }
      }
    }
    thead tr,
    tbody tr {
      @include border-left(#b5b4b5);

      display: flex;
      align-items: stretch;
      @include border-bottom(#b5b4b5);
      th,
      td {
        box-sizing: border-box;

        @include border-right(#b5b4b5);
      }
      > th:first-child,
      td:first-child {
        max-width: 258px;
        min-width: 258px;
        padding: 0 10px;
        box-sizing: border-box;
        vertical-align: top;
        @include fjc(flex-start);
        flex-flow: row wrap;
        > div {
          width: 348px;
          max-width: 348px;
        }
      }
      > th:nth-child(2),
      td:nth-child(2) {
        max-width: 106px;
        min-width: 106px;
        white-space: nowrap;
      }
      th:nth-child(3),
      td:nth-child(3) {
        max-width: 156px;
        min-width: 156px;
        white-space: nowrap;
      }
      > td:nth-child(3) {
        @include fontSize(22);
      }

      th:nth-child(4) {
        white-space: nowrap;
      }
      th:nth-child(4),
      td:nth-child(4) {
        max-width: 230px;
        width: 230px;
        padding: 0 10px;
      }
    }
  }
}
.to-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: flex-end;
  		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
  > div {
    background: $primaryColor;
    color: #fff;
    @include wh(216, 84);
    @include fjc(center);
    @include fontSize(30);
  }
  > .disable {
    background: #ccc;
  }
}
.tab-list {
  display: flex;
  margin: 20px;
  position: relative;
  z-index: 1000;
  border: 1px solid $primaryColor;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  .tab-item {
    flex: 1;
    display: flex;
    @include fontSize(30);
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111;

    &:first-child {
      border-right: 1px solid $primaryColor;
    }
    &.active {
      background: $primaryColor;
      color: #fff;
    }
  }
}
</style>